<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="teamShow-box flex">
		<text class="title">参与组队</text>
		<view class="submit-team-item flex-row-center">
			<view class="teanm-item-left flex-row-center">
				<up-icon name="account" color="#ABABAD" size="32rpx"></up-icon>
				<text class="item-name">姓名</text>
			</view>
			<up-input border="none" placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
				placeholder="请输入名字" v-model="teamInfo.name"></up-input>
		</view>
		<view class="submit-team-item flex-row-center">
			<view class="teanm-item-left flex-row-center">
				<up-icon name="phone" color="#ABABAD" size="32rpx"></up-icon>
				<text class="item-name">电话</text>
			</view>
			<up-input border="none" placeholderClass="placeholderClass" type="number" maxlength="11" fontSize="26rpx" color="#DEDEDE"
				placeholder="请输入电话" v-model="teamInfo.phone"></up-input>
		</view>
		<view class="submit-team-item flex-row-center">
			<view class="teanm-item-left flex-row-center">
				<image src="@/page_main/static/Union.png" class="union" mode=""></image>
				<text class="item-name">性别</text>
			</view>
			<view class="sex-box flex-row-center">
				<view @click="changeSex(item.name)" v-for="(item,index) in sexList" :key="index"
					:class="[teamInfo.sex==item.name?'sex-item-avtive':'sex-item','flex-center']">
					<text class="sex">{{item.name}}</text>
				</view>
			</view>

		</view>
		<view class="submit-team-item flex-row-center">
			<view class="teanm-item-left flex-row-center">
				<up-icon name="clock" color="#ABABAD" size="32rpx"></up-icon>
				<text class="item-name">预计到场</text>
			</view>
			<view class="time-box flex-row-center" @click="timeShow=true">
				<up-input border="none" disabled placeholderClass="placeholderClass" fontSize="26rpx" color="#DEDEDE"
					placeholder="请选择预计到场时间" v-model="teamInfo.reachTime"></up-input>
				<up-icon name="arrow-right" color="#646668" size="28rpx"></up-icon>
			</view>
		</view>
		<view class="submit-btn">
			<up-button text="立即支付 ￥199" @click="submitTeam" :loading="teamInfo.loadingStatus" loadingText="提交中"
				:customStyle="{color:'#18625C',fontSize:'34rpx',fontWeight:'bold',height:'100rpx'}"
				color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);"></up-button>
		</view>
	</view>
	<!-- 时间选择组件 -->
	<up-datetime-picker :show="timeShow" :minDate="Date.now()" v-model='nowTime' @cancel="timeShow=false"
		@confirm="confirmGameTime" mode="datetime"></up-datetime-picker>
</template>

<script setup>
	import {
		formatDate
	} from '@/utils/utools.js'
	const sexIndex = ref('男');
	const nowTime = Date.now(); //当前时间
	const timeShow = ref(false);
	const sexList = [{
		name: '男'
	}, {
		name: '女'
	}]
	const rules = {
		phone: {
			required: true,
			maxLength: 11,
			reg: /^1[3-9]\d{9}$/,
			msg: '请输入正确的手机号'
		},
		name: {
			required: true,
			msg: '请填写姓名'
		},
		sex: {
			required: true,
			msg: '请选择性别'
		},
		reachTime: {
			required: true,
			msg: '请选择到场时间'
		},
	};
	const teamInfo = reactive({
		name: '',
		sex: '',
		phone: '',
		reachTime: '',
		loadingStatus: false
	})
	const changeSex = (sex) => { //切换性别
		teamInfo.sex = sex;
	}
	const confirmGameTime = (e) => {
		if (e.value) {
			teamInfo.reachTime = formatDate(e.value, 'yyyy-MM-dd hh:mm');
			timeShow.value = false;
		}
	}
	const submitTeam = async () => {
		if (teamInfo.loadingStatus) return
		const validate = validateForm(teamInfo, rules); //验证
		if (!validate.status) return
		teamInfo.loadingStatus = true;
	}
</script>

<style lang="scss" scoped>
	.teamShow-box {
		background-color: #222528;
		height: 1020rpx;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx;
		border-radius: 18rpx 18rpx 0 0;
		position: relative;

		.title {
			font-weight: bold;
			font-size: 34rpx;
			color: rgba(255, 255, 255, 0.87);
			line-height: 40rpx;
			margin-bottom: 46rpx;
		}

		.submit-team-item {
			margin-bottom: 46rpx;

			.teanm-item-left {
				margin-right: 50rpx;

				.union {
					width: 24rpx;
					height: 22rpx;
				}

				.item-name {
					font-weight: bold;
					font-size: 30rpx;
					color: rgba(255, 255, 255, 0.8);
					line-height: 35rpx;
					text-align: justify;
					text-align-last: justify;
					width: 124rpx;
					margin-left: 10rpx;
					display: block;
				}
			}

			.time-box {
				flex: 1;
				justify-content: space-between;
			}

			.sex-box {
				view:not(:last-child) {
					margin-right: 40rpx;
				}

				.sex-item {
					width: 112rpx;
					height: 64rpx;
					box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(108, 199, 190, 0.38);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #B0B0B2;

					.sex {
						font-weight: 500;
						font-size: 30rpx;
						color: rgba(255, 255, 255, 0.8);
					}
				}

				.sex-item-avtive {
					width: 112rpx;
					height: 64rpx;
					background: linear-gradient(270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);
					box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(108, 199, 190, 0.38);
					border-radius: 8rpx 8rpx 8rpx 8rpx;

					.sex {
						font-weight: bold;
						font-size: 30rpx;
						color: rgba(10, 83, 79, 0.8);
					}
				}
			}

		}

		.submit-btn {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 16rpx;
		}
	}
</style>